<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
  </style>
  <body>
    <!-- 上传组件
        el-upload
            action:上传接口地址
            name:它的值就是对应上传文件接口参数对应的字段名
            show-file-list  boolean  true:显示列表  false不显示列表
            before-upload 上传前(它的值是一个function)  ,可以做一些上传前的拦截处理,它的方法有一个参数 
                 file:上传文件的对象,该对象里面有type(文件类型),size(文件大小),可以在上传前对文件大小类型等做一些控制
                 该方法必须 return一个boolean值.如果该值true 正常上传  false 中止上传
            on-success上传成功后的回调(它的值也是一个function),它的function(res.file){
                res:上传成功后接口返回值
                file:element帮我们封装的一个对象,它里面有一个response,就是我们前面的res(接口返回值),raw:上传的文件对象
            } 
    -->
    <div id="app">
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1/heimamm/public/uploads"
        name="image"
        :show-file-list="false"
        :before-upload="xxx"
        :on-success="handleAvatarSuccess"
      >
        <img
          v-if="imageUrl"
          :src="'http://127.0.0.1/heimamm/public/'+imageUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div>
    <script src="./vue.js"></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="./ele.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            imageUrl: "",
          };
        },
        methods: {
          handleAvatarSuccess(res, file) {
            //   res:上传接口调用成功后的返回值
            //  filep它是element帮我们封装的一个参数
            window.console.log(res, file);
            this.imageUrl = res.data.file_path;
            // this.imageUrl = URL.createObjectURL(file.raw); //将file文件转换成了一个blob文件地址
          },
          xxx(file) {
            window.console.log(file);
            const isJPG =
              file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 / 1024 < 2;
            //   file.size:字节
            if (!isJPG) {
              this.$message.error("上传头像图片只能是 JPG ,PNG 格式!");
            }
            if (!isLt2M) {
              this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
          },
        },
      });
    </script>
  </body>
</html>
